// 完全版，内部包含jquery和lodash
import { TreeCanvas as Canvas,  } from 'butterfly-dag';
import 'butterfly-dag/dist/index.css';
import { useEffect } from 'react'
// import data from './data'
type Props = {
  mockData:any
}
const IvFlowChart = (props:Props) => {
  const {mockData} =props
  useEffect(() => {
    let canvas = new Canvas({
      root: document.getElementById('butterfly'),
      disLinkable: true, // 可删除连线
      linkable: true,    // 可连线
      draggable: true,   // 可拖动
      zoomable: true,    // 可放大
      moveable: true,    // 可平移

      theme: {
        edge: {
          shapeType: 'Manhattan',
          arrow: true
        }
      },
      layout: {
        type: 'compactBox',
        options: {
          direction: 'TB',
          getHeight(d) {
            return 60;
          },
          getWidth(d) {
            return 120;
          },
          getHGap(d) {
            return 20;
          },
          getVGap(d) {
            return 80;
          },
        }
      }
    });
    canvas.draw(mockData, {}, () => {
      canvas.focusCenterWithAnimate()
    })
  })

  return (
    <div style={{ height: '100%' }} className='compact-box-tree-page'>
      <div className="compact-box-tree-canvas" style={{ width: '100%', height: '100%' }} id='butterfly'>
      </div>
    </div>



  )
}
export default IvFlowChart